<template>
  <div class="box_wrapper">
    <p class="tips">小程序路径</p>
    <el-form
      ref="ruleFormRef"
      size="large"
      :model="formData"
      label-width="100px"
      class="form_box"
    >
      <el-row>
        <el-col :span="18">
          <el-form-item label="首页：" prop="name">
            <el-input v-model="formData.page1" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="播放页：" prop="name">
            <el-input v-model="formData.page2" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="我的：" prop="name">
            <el-input v-model="formData.page3" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row class="btn_box">
        <el-col :span="16">
          <el-form-item label="" prop="name">
            <el-button type="primary" style="width: 100px"> 保 存 </el-button>
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, computed } from "vue";
import type { FormInstance } from "element-plus";
const ruleFormRef = ref<FormInstance>();
const dialogVisible = ref(false);
const form = {
  page1: "/pages/home/index",
  page2:
    "/pages/login/index?url=/pages/hot/play&linkId=广告ID(选填)&id=剧集ID(必填)&episode=集数(选填)",
  page3: "/pages/mine/index",
};
const formData = ref(Object.assign({}, form));
</script>

<style lang="scss" scoped>
.box_wrapper {
  height: calc(100vh - 70px);
  padding: 20px;
  background-color: #fff;

  .tips {
    padding-left: 20px;
    margin: unset;
    font-size: 20px;
    line-height: 70px;
    color: #666;
    border-bottom: 1px solid #eee;
  }

  .form_box {
    padding-top: 30px;

    :deep(.el-form-item__label) {
      font-size: 18px;
    }
  }

  .btn_box {
    margin-top: 20px;
  }
}
</style>
